import { Component, OnInit, Input, Output, OnChanges, SimpleChanges } from '@angular/core';
import { optionsData, seriesData } from "./echarts.model";

@Component({
	selector: 'app-assess-column-echart',
	templateUrl: './assess-column-echart.component.html',
	styleUrls: ['./assess-column-echart.component.css']
})
export class AssessColumnEchartComponent implements OnInit {

	/**
	 * echarts实例对象
	 * 
	 * @private
	 * @type {*}@memberof CompareEchartsComponent
	 */
	private echartsIntance: any = null;

	/**
	 * 父组件输入echarts参数
	 * 
	 * @private
	 * @type {*}@memberof CompareEchartsComponent
	 */
	@Input() series: seriesData[];
	@Input() xAxisData: string[] = [];
	@Input() isTurb: boolean;

	options: optionsData;
	tooltip: object;
	color: string[];
	xAxis: object;
	yAxis: any[];
	grid: object;
	legend?: object;
	dataZoom?: any[];
	isFirst: boolean = true;

	constructor() { }

	ngOnInit() {
		//console.log(this.isTurb)
	}

	ngOnChanges(changes: SimpleChanges) {

		if (changes['series'] && changes['series'].currentValue) {
			if (!this.isFirst) {
				this.updateEchart();
			} else {
				this.isFirst = false;
				this.initOptions();
			}
		}

		if (changes['xAxisData'] && changes['xAxisData'].currentValue) {
			if (!this.isFirst && this.echartsIntance) {
				this.options.xAxis['data'] = this.xAxisData
				this.options.series = this.series;
				this.echartsIntance.setOption(this.options, true);
			} else {
				this.isFirst = false;
				this.initOptions();
			}
		}
	}

	initOptions() {
		this.tooltip = {
			trigger: 'axis',
			axisPointer: {
				type: 'cross',
				crossStyle: {
					color: '#999'
				}
			}
		},
			this.legend = {
				data: [
					{
						name: '实发电量',
						textStyle: { color: '#22b14c' }
					},
					{
						name: '性能损失',
						textStyle: { color: '#a349a4' }
					},
					{
						name: '停机损失',
						textStyle: { color: '#ff7f27' }
					},
					{
						name: '限电损失',
						textStyle: { color: '#00a2e8' }
					},
					{
						name: '坏点损失',
						textStyle: { color: '#FF0000' }
					},
					{
						name: '能量利用率',
						textStyle: { color: '#fff' }
					}
				]
			}
		this.color = ['#22b14c', '#a349a4', '#ff7f27', '#00a2e8', '#FF0000', '#fff'],
			this.grid = {
				left: '3%',
				right: '2%',
				bottom: '6%',
				containLabel: true
			},
			this.xAxis = {
				type: 'category',
				data: this.xAxisData,        //['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
				axisPointer: {
					type: 'shadow'
				},
				axisLine: {
					lineStyle: {
						color: '#35789d',
						width: 2
					}
				},
				axisLabel: {
					show: true,
					textStyle: {
						color: '#43a0b3',
						fontSize: 12
					},
					margin: 10,
				},
			},
			this.yAxis = [
				{
					type: 'value',
					name: '电量：万kWh',
					axisLabel: {
						formatter: '{value}',
						textStyle: {
							color: '#43a0b3'
						},
					},
					axisLine: {
						lineStyle: {
							color: '#35789d',
							width: 2
						}
					},
					axisTick: {
						show: false
					},
					splitLine: {
						show: true,
						lineStyle: {
							color: '#1b4268'
						}
					}
				},
				{
					type: 'value',
					name: '利用率',
					axisLabel: {
						formatter: '{value} %',
						textStyle: {
							color: '#43a0b3'
						},
					},
					axisLine: {
						lineStyle: {
							color: '#35789d',
							width: 2
						}
					},
					axisTick: {
						show: false
					},
					splitLine: {
						show: true,
						lineStyle: {
							color: '#1b4268',

						}
					}

				}
			]

		if (this.isTurb) {
			this.dataZoom = [{
				type: 'slider',
				bottom: 5,
				height: 10,
				start: 0,
				end: 50,
				borderColor: 'transparent',
				backgroundColor: '#e2e2e2',
				handleSize: 20,
				handleStyle: {
					shadowBlur: 6,
					shadowOffsetX: 1,
					shadowOffsetY: 2,
					shadowColor: '#aaa'
				},
				labelFormatter: ''
			}, {
				type: 'inside'
			}]
		}

		if (this.options == null) {
			this.options = {
				tooltip: this.tooltip,
				color: this.color,
				grid: this.grid,
				xAxis: this.xAxis,
				yAxis: this.yAxis,
				legend: this.legend,
				dataZoom: this.dataZoom,
				series: this.series
			};
		}

	}

	/**
	 * 初始化echarts实例
	 * 
	 * 
	 * @memberof CompareEchartsComponent
	 */
	onChartInit(ec: any) {
		this.echartsIntance = ec;
		// this.updateEchart();
	}
	/**
	 * 更新echarts实例数据
	 * 
	 * 
	 * @memberof CompareEchartsComponent
	 */
	updateEchart() {
		if (this.echartsIntance != null) {
			this.options.tooltip = this.tooltip;
			this.options.series = this.series;
			this.echartsIntance.setOption(this.options);
		};
	}

}




// WEBPACK FOOTER //
// ./src/app/module/performance/farm-power-assess/assess-column-echart/assess-column-echart.component.ts